import React, { Component } from 'react'
// import { Link } from "react-router-dom"
import Search from '../../components/Search'
import Banner from "./Banner"
import Icon from "./Icon"
import Recommend from "./Recommend"
import List from "./List"
import { getFind } from '../../api/find'

export default class Find extends Component {
  state = {
    bannerList: [],
    RecommendData: {},
    RecommendList: [],
    twoList: [],
    remText: '',
    subTitle: ''
  }
  async componentDidMount () {
    document.title = "首页"
    getFind().then(res => {
      let blocks = res.data.blocks
      this.setState({
        bannerList: blocks[0].extInfo.banners,
        RecommendList: blocks[1].creatives,
        remText: blocks[1].uiElement.subTitle.title,
        twoList: blocks[2].creatives,
        subTitle: blocks[2].uiElement.subTitle.title
      })
    })
  }
  render () {
    return (
      <div id="find">
        <header>
          <Search />
        </header>
        <main>
          <Banner bannerList={this.state.bannerList} />
          <Icon />
          <Recommend RecommendList={this.state.RecommendList} title={this.state.remText} />
          <List list={this.state.twoList} text={this.state.subTitle} />
        </main>
      </div >
    )
  }
}
